import React, { useState } from 'react';
import { SafeAreaView, View, Button } from 'react-native';
import { Line } from './components/Line';
import { Box } from './components/Box';
import { styles } from './styles';


const App = () => {
  const [layout, setLayout] = useState([['','',''],['','',''],['','','']]);
  const [symbol, setSymbol] = useState("X");
  const updateLayout = (lineIndex, itemIndex) => {
    if (layout[lineIndex][itemIndex] !== '') return layout;
    setLayout(layout => {
      let altered = layout;
      altered[lineIndex][itemIndex] = symbol;
      return altered;
    })
    setSymbol((symbol === 'X') ? 'O' : 'X');
  };
  return (
    <SafeAreaView style={styles.root}>
      <View style={styles.table}>
        {layout.map((line, lineIndex) => (
          <Line>
            {line.map((value, itemIndex) => (
              <Box
                value={value}
                lineIndex={lineIndex}
                itemIndex={itemIndex}
                onPress={updateLayout}
              />
            ))}
          </Line>
        ))}
      </View>
      <Button
        title="Reiniciar"
        onPress={() => {
          setLayout([['','',''],['','',''],['','','']]);
          setSymbol('X');
        }}
      />
    </SafeAreaView>
  );
};

export default App;
